mixin header(label, name)
  a.section-header.btn.btn-small.btn-illustrated.btn-warning(role="button", id="#palette-header-" + _.string.slugify(label), data-panel="#palette-tab-" + _.string.slugify(label)) #{name}
    if label == 'api-area'
      div.glyphicon.glyphicon-chevron-down(style="float: right")
    else
      div.glyphicon.glyphicon-chevron-right(style="float: right")
div.container
  div.left.nano
    div.nano-content.panel-group#spell-palette-api-bar
      if view.level.get('type') == 'web-dev'
        +header('api-area', 'HTML')
      else
        +header('api-area', 'Methods')
      div.apis.panel-collapse.collapse.in#palette-tab-api-area
        .properties.properties-this
      if tabs
        each entries, tab in tabs
          +header(tab, tab)
          div.panel-collapse.collapse(id="palette-tab-" + _.string.slugify(tab))
            div(class="properties properties-" + _.string.slugify(tab))

      +header('events', 'Events')
      div.apis.panel-collapse.collapse#palette-tab-events

      +header('stuff-area', 'Spawnable')
      div.apis.panel-collapse.collapse#palette-tab-stuff-area

  div.right
    .closeBtn.btn.btn-illustrated.btn-danger
      span.glyphicon.glyphicon-remove
    if isIE
      .scrollArea.always-scroll-y
        .scrollableArea
          .rightContentTarget.content
    else
      .scrollArea
        .scrollableArea
          .rightContentTarget.content
